<!doctype html>
<html lang="zh-cn">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>内切圆角</title>
</head>
<style>
  body {
    background: linear-gradient(90deg, #fff, #bbb);
  }

  div {
    position: relative;
    width: 20vw;
    height: 8vw;
    margin: 1vw auto;
    border-radius: 1vmin;
    overflow: hidden;
    line-height: 8vw;
    color: #fff;
    text-align: center;
  }

  .shadow:before {
    position: absolute;
    content: "";
    top: -2vw;
    left: -2vw;
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    box-shadow: 0 0 0 25vw #e91e63;
    z-index: -1;
    animation: shadowmove 10s infinite;
  }

  @keyframes shadowmove {
    0% {
      background: #e91e63;
      box-shadow: 0 0 0 0 #e91e63;
    }
    10% {
      background: transparent;
      box-shadow: 0 0 0 0 #e91e63;
    }
    50% {
      background: transparent;
      box-shadow: 0 0 0 25vw #e91e63;
    }
  }
  .shadow2::before {
    position: absolute;
    content: "";
    top: -2vw;
    left: -2vw;
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    box-shadow: 0 0 0 15vw #e91e63;
    z-index: -1;
  }
  .shadow2::after {
    position: absolute;
    content: "";
    bottom: -2vw;
    right: -2vw;
    width: 4vw;
    height: 4vw;
    border-radius: 50%;
    box-shadow: 0 0 0 15vw #e91e63;
    z-index: -1;
  }

  .linear {
    background-size: 100% 100%;
    background-image: radial-gradient(circle at 0 0, transparent 0, transparent 2vw, #03A9F5 2vw);
    background-repeat: no-repeat;
  }

  .linear2 {
    background-size: 70% 70%;
    background-image: radial-gradient(circle at 100% 100%, transparent 0, transparent 2vw, #03A9F5 2vw), radial-gradient(circle at 0 0, transparent 0, transparent 2vw, #03A9F5 2vw), radial-gradient(circle at 100% 0, transparent 0, transparent 2vw, #03A9F5 2vw), radial-gradient(circle at 0 100%, transparent 0, transparent 2vw, #03A9F5 2vw);
    background-repeat: no-repeat;
    background-position: right bottom, left top, right top, left bottom;
  }
</style>
<body>
<ul>
  <li>阴影实现的关键点在于使用伪元素绝对定位在容器的一角，元素本身透明，阴影扩散开形成内切圆角效果</li>
  <li>阴影实现缺点，单个标签最多只能是2个内切圆角</li>
  <li>径向渐变实现内切圆角可以是4边</li>
</ul>
<div class="shadow">使用阴影的扩散半径实现内切圆角</div>
<div class="shadow2">阴影实现缺点，单个标签最多是2边</div>
<div class="linear">使用径向渐变实现内切圆角</div>
<div class="linear2">径向渐变实现内切圆角可以是4边</div>
</body>
</html>
